<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
		<ol>
			<!-- Create an instance of the todo-item component -->
			<todo-item></todo-item>
		</ol>
		<div id="app-7">
			<ol>
				<!-- Now we provide each todo-item with the todo object    -->
				<!-- it's representing, so that its content can be dynamic -->
				<todo-item v-for="item in groceryList" v-bind:todo="item"></todo-item>
			</ol>
		</div>
		<!--<script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>-->
		<script src="https://unpkg.com/vue/dist/vue.js"></script>
		<script type="text/javascript">
			Vue.component('todo-item', {
				props: ['todo'],
				template: '<li>{{ todo.text }}</li>'
			})
			var app7 = new Vue({
				el: '#app-7',
				data: {
					groceryList: [{
						text: 'Vegetables'
					}, {
						text: 'Cheese'
					}, {
						text: 'Whatever else humans are supposed to eat'
					}]
				}
			})
			var arr = [1,2,3,4,5]
			document.write(arr.reverse())
		</script>
	</body>

</html>